<template>
  <div>
    <el-dialog :visible.sync="dialog" :before-close="handleCancel" title="选择知识商品" width="700px">
      <div>
        <el-input v-model="keyWord" placeholder="请输入商品名称" style="width:300px;" />
        <el-button icon="el-icon-search">搜索</el-button>
      </div>

      <div class="table-box">
        <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
          <el-tab-pane label="专栏" name="1" />
          <el-tab-pane label="图文" name="2" />
          <el-tab-pane label="音频" name="3" />
          <el-tab-pane label="视频" name="4" />
          <el-tab-pane label="直播" name="5" />
          <el-tab-pane label="分销商品" name="6" />
        </el-tabs>
        <el-table
          v-loading="loading"
          :data="newList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
          class="textRadio"
          style="width: 100%;"
          @row-click="clickRow"
        >
          <el-table-column width="50" align="center">
            <template slot-scope="scope">
              <el-radio :label="scope.row.id" v-model="selectId" />
            </template>
          </el-table-column>
          <el-table-column label="页面名称">
            <template slot-scope="scope">
              <div class="row-box">
                <div class="img-box">
                  <img :src="scope.row.imgUrl" alt />
                </div>
                <div class="list-box">
                  <div class="list-title">{{ scope.row.title }}</div>
                  <div class="list-price">{{ scope.row.price=='0'?'免费':scope.row.price }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="newList.length>5" class="block" style="margin:20px 0;">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="newList.length"
            background
            layout=" prev, pager, next, jumper"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      keyWord: '',
      selectId: '',
      selectName: '',
      selectLink: '',
      activeName: '1',
      loading: false,
      currentPage: 1,
      pageSize: 5,
      newList: [],
      studyArticleList: [
        {
          id: '122',
          title: '专栏-语文作文提升',
          content: '音频-语文作文提升',
          imgUrl: '/src/assets/analyze_data/header_bg_2.png',
          price: '20',
          tag: '专栏',
          link: 'www.baidu.com'
        },
        {
          id: '123',
          title: '专栏-语文作文提升',
          content: '音频-语文作文提升',
          imgUrl: '/src/assets/analyze_data/header_bg_2.png',
          price: '20',
          tag: '专栏',
          link: 'www.baidu.com'
        },
        {
          id: '124',
          title: '专栏-语文作文提升',
          content: '音频-语文作文提升',
          imgUrl: '/src/assets/analyze_data/header_bg_2.png',
          price: '20',
          tag: '专栏',
          link: 'www.baidu.com'
        },
        {
          id: '125',
          title: '音频-英语口语练习',
          content: '音频-英语口语练习内容',
          imgUrl: '/src/assets/analyze_data/decorate.png',
          price: '0',
          tag: '音频',
          link: 'www.baidu.com'
        },
        {
          id: '126',
          title: '视频-英语口语练习',
          content: '视频-英语口语练习内容',
          imgUrl: '/src/assets/analyze_data/decorate.png',
          price: '30',
          tag: '视频',
          link: 'www.baidu.com'
        },
        {
          id: '127',
          title: '图文-英语口语练习',
          content: '图文-英语口语练习内容',
          imgUrl: '/src/assets/analyze_data/decorate.png',
          price: '15',
          tag: '图文',
          link: 'www.baidu.com'
        }
      ]
    }
  },
  mounted() {
    this.handleTabClick({ label: '专栏' })
  },
  methods: {
    handleTabClick(val) {
      this.loading = true
      setTimeout(() => {
        this.newList = this.studyArticleList.filter((item) => {
          return item.tag === val.label
        })
        this.loading = false
      }, 500)
    },
    clickRow(row) {
      this.selectId = row.id
      this.selectName = row.title
      this.selectLink = row.link
    },
    // 分页设置
    handleCurrentChange(arg) {
      this.currentPage = arg
    },
    handleCancel() {
      this.$emit('cancelClick')
    },
    handleConfirm() {
      if (!this.selectName) {
        this.$message.warning('请选择商品')
        return
      }
      this.$emit('confirmClick', {
        id: this.selectId,
        name: this.selectName,
        link: this.selectLink
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.textRadio {
  /deep/.has-gutter {
    display: none;
  }
  /deep/.el-radio__label {
    display: none;
  }
  .row-box {
    display: flex;

    .img-box {
      width: 56px;
      height: 42px;
      margin-right: 10px;
      img {
        border-radius: 3zpx;
        width: 100%;
        height: 100%;
      }
    }
    .list-box {
      .list-title {
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 6px;
      }
      .list-price {
        color: #dd2e2e;
      }
    }
  }
}
.table-box {
  margin-top: 20px;
  max-height: 500px;
  overflow: auto;
}
</style>
